<template>
  <div>
    <div>
      <table>
          <tr>
            <td>排名</td>
            <td>姓名</td>
            <td>状态</td>
            <td>接待人数</td>
          </tr>
        <tbody>
          <tr v-for="(item,index) in fiveList" :key='index'>
            <td>
              <img v-if="index == 0" src="../../../assets/onLineService/top1.png" alt="" style="width:.4rem;height:.4rem">
              <img v-else-if="index == 1" src="../../../assets/onLineService/top2.png" alt="" style="width:.4rem;height:.4rem">
              <img v-else-if="index == 2" src="../../../assets/onLineService/top3.png" alt="" style="width:.4rem;height:.4rem">
              <span v-else>{{index+1}}</span>
            </td>
            <td>{{item.workername}}</td>
            <td>
              <span v-if='item.title=="上线"' style="color:#00AF60">{{item.title}}</span>
              <span v-else-if='item.title=="下线"' style="color:#F5222D">{{item.title}}</span>
              <span v-else-if='item.title=="示忙"' style="color:#FF7E00">{{item.title}}</span>
              <span v-else-if='item.title=="挂起"' style="color:#563FF9">{{item.title}}</span>
              <span v-else>{{item.title}}</span>
            </td>
            <td>{{item.hui}}</td>
          </tr>
        </tbody>
      </table>
      <div class="upDwonBtn" v-if='this.allList.length>5'>
        <div class="moreBtn" v-show="this.fiveList.length<this.allList.length" @click="seeMore">查看更多</div>
        <div class="lessBtn" v-show="this.fiveList.length==this.allList.length" @click="upMore">收起</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    formData: {
      type: Array
    }
  },
  data() {
    return {
      allList: [],
      fiveList: []
    };
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        this.allList = JSON.parse(JSON.stringify(this.formData));
        if (this.allList.length > 5) {
          this.fiveList = JSON.parse(JSON.stringify(this.allList.slice(0, 5)));
        } else {
          this.fiveList = JSON.parse(JSON.stringify(this.allList));
        }
      },
      deep: true
    }
  },
  mounted() {
    this.allList = JSON.parse(JSON.stringify(this.formData));
    if (this.allList.length > 5) {
      this.fiveList = JSON.parse(JSON.stringify(this.allList.slice(0, 5)));
    } else {
      this.fiveList = JSON.parse(JSON.stringify(this.allList));
    }
  },
  methods: {
    seeMore() {
      this.fiveList = JSON.parse(JSON.stringify(this.allList));
    },
    upMore() {
      this.fiveList = JSON.parse(JSON.stringify(this.allList.slice(0, 5)));
    }
  }
};
</script>

<style scoped lang='less'>
table {
  width: 100%;
  text-align: center;
  overflow: hidden;
  border-spacing: 0px;
  font-size: 0.28rem;
  > tr {
    background-color: #fafafa;
  }
  td {
    width: 25%;
    padding: 0.2rem 0;
  }
}
.upDwonBtn {
  text-align: center;
  color: #787878;
  font-size: 0.25rem;
  padding: 0.2rem 0;
}
</style>